<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%
	String path = request.getContextPath();
%>
<html>
	<head>
		<title>index.jsp</title>
		<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/btn_class.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/extjs/style.css" />
<script type="text/javascript"
	src="<%=path%>/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path%>/extjs/ext-all.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
</head>

<body >
<div id="west-div" style="width: 100%; height: 100%;"></div>
	<div id="center-div"></div>
<script type="text/javascript">
Ext.onReady(function(){

	// shorthand
				var Tree_op = Ext.tree;
				var loader_op = new Tree_op.TreeLoader({
					dataUrl : 'office!buildCheckOfficeTree.do'
				});
				loader_op.on("beforeload", function(treeLoader, node) {
					//loader_op.baseParams.fcode = Ext.get("r_id").dom.value;//角色id
					//loader.baseParams.fcode  = node.attributes.fcode;
				}, this);

				loader_op.processResponse = function(response, node, callback) {
					var json1 = response.responseText;
					
					try {
						var json = eval("(" + json1 + ")");
						node.beginUpdate();
						//从json中取得json数组
						var o = json["key"];
						for ( var i = 0, len = o.length; i < len; i++) {
							var n = this.createNode(o[i]);
							if (n) {
								node.appendChild(n);
							}
						}
						node.endUpdate();
						if (typeof callback == "function") {
							callback(this, node);
						}
					} catch (e) {
						this.handleFailure(response);
					}
				};

				var tree_op = new Tree_op.TreePanel({
					region : 'center',
					id : 'west-panel',
					el : 'west-div',
					width : 280,
					//	title : '所属区县',
					useArrows : true,
					autoScroll : true,
					animate : true,
					enableDD : true,
					containerScroll : true,
					rootVisible : false, //树根不可见
					loader : loader_op
				});
				
				//单击事件
				tree_op.on('click', function(node) {
					ds.removeAll();
						ds.load( {
							params : {
								start : 0,
								limit : 50,
								foffice : node.id,
								fstate : '1',
								fkeywords : Ext.get('fkeywords_id').dom.value,
								fbtime : Ext.get('fbtime_id').dom.value,
								fetime : Ext.get('fetime_id').dom.value
								
							}
						});
				}, tree_op);
				
				/*
				//checkBox勾选事件
				tree_op.on('checkchange', function(node, checked) {
					node.expand();
					node.attributes.checked = checked;
					node.eachChild(function(child) {
						child.ui.toggleCheck(checked);
						child.attributes.checked = checked;
						child.fireEvent('checkchange', child, checked);
					});
				}, tree_op);
                */
                
				// set the root node
				var root_op = new Tree_op.AsyncTreeNode({
					text : '所有栏目',
					draggable : false,
					id : '1',
					fid : '1',
					ftype : '1'
				});
				tree_op.setRootNode(root_op);
	
	var Jthtwb = Ext.data.Record.create([ {
		name : 'fid',
		mapping : 'fid',
		type : 'string'
	}, {
		name : 'fname',
		mapping : 'fname',
		type : 'string'
	}, {
		name : 'fdesc',
		mapping : 'fdesc',
		type : 'string'
	}, {
		name : 'fcdate',
		mapping : 'fcdate',
		type : 'string'
	}, {
		name : 'fldate',
		mapping : 'fldate',
		type : 'string'
	}, {
		name : 'loginName',
		mapping : 'loginName',
		type : 'string'
	}, {
		name : 'password',
		mapping : 'password',
		type : 'string'
	} ]);

	//用户列表
	var ds_user = new Ext.data.Store({
		reader : new Ext.data.JsonReader({
			totalProperty : 'totalProperty',
			root : 'root'
		}, Jthtwb),
		idProperty : 'threadid',
		remoteSort : true,
		url : 'user!queryUserList.do'
	});
	ds_user.load({
		params : {
			start : 0,
			limit : 50
		}
	});

	//定义勾选框，不需要可不必定义
	var sm_user = new Ext.grid.CheckboxSelectionModel({
		singleSelect : false
	});

	//定义列
	var colM_user = new Ext.grid.ColumnModel([ sm_user, new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
	    {
			header : '登录名',
			dataIndex : 'loginName',
			width : 120,
			sortable : false
		}, {
			header : '密码',
			dataIndex : 'password',
			width : 120,
			sortable : false
		}, {
			header : '上次登录时间',
			dataIndex : 'fldate',
			width : 140,
			renderer : function(value) {
					if (value == "null") {
						return "";
					} else {
						return value;
					}
				}
		} ]);

	//生成表格
	var grid_user = new Ext.grid.GridPanel({
		region : 'center',
		height : 350,
		autoWidth : true,
		stripeRows : true,
		title : '用户列表',
		cm : colM_user,
		ds : ds_user,
		sm : sm_user,
		
		enableHdMenu : false
	});
	
	var btn_add = new Ext.Button({
		text : '新增',
		iconCls : 'sy-add',
		handler : function() {
			user_detail_form();
		}
	});

	
	
	/**************************** 以下是新增群组表单 *************************************************/
	////////////////////////////////////  表单校验模块  begin   /////////////////////////////////////////////////////////////

				//先用Ext.apply方法添加自定义的验证函数
				Ext.apply(Ext.form.VTypes,{
					
					//password密码校验
				    password:function(val,field){//val指这里的文本框值，field指这个文本框组件
				      if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
				          var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
				          return (val==pwd.getValue());
				      }
				      return true;
				    },
				    passwordText: '两次输入的密码不一致！',
				    //中文
				    chinese:function(val,field)   
				    {   
				    	var reg = /^[\u4e00-\u9fa5]+$/i;   
				    	if(!reg.test(val))   
				    	{   
				    		return false;   
				    	}   
				    		return true;   
				    	},   
				    chineseText:'请输入中文', 
				    //办公电话
				    phone:function(val,field)   
				    {   
				           try  
				            {   
				                if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))   
				                    return true;   
				                return false;   
				            }   
				            catch(e)   
				            {   
				                return false;   
				            }   
				      },   
				      phoneText:'请输入正确的电话号码,如:0920-29392929',
				      
				      //用户验证是否已存在
				      CheckUserName:function(){   
				    	     var isok = false;
				    	     var loginname = Ext.get('login_name').dom.value;
				    	     Ext.Ajax.request({
										url : 'user!checkLoginName.do',
										params:{
				    	        	 		loginName : loginname
					    	    		},		
										success : function(response, options) {
											var messStr = response.responseText;
											if(messStr) {
												Ext.MessageBox.alert('警告', '该登陆账号已经存在！');
												Ext.get('loginname_flag').dom.value = "1";
												return messStr;
											} else {
												Ext.MessageBox.alert('提示', "oo" + response.responseText);
												Ext.get('loginname_flag').dom.value = "0";
												return messStr;
											}
										}
									});   
				    	   return true;  
				    	  }
				});

////////////////////////////////////  表单校验模块  end   /////////////////////////////////////////////////////////////
				//用户表单
				function user_detail_form() {
					var isLoginNameOK = true; 
					var user_form_send = new Ext.form.FormPanel({  
				        layout : "form",  
				        id:"userform",  
				        frame : true,  
						labelWidth : 55,
				        waitMsgTarget: true,  
				        items : [{
				        	xtype : "textfield",  
		                 //   vtype:"alphanum",//只能输入字母和数字，无法输入其他
		                 //   vtypeText:"只能输入字母和数字",//错误提示信息
		                    fieldLabel : "登录账号",  
		                    allowBlank : false,
		                    emptyText : '账号最多不超过15个字符',
		                    blankText:"只能输入字母和数字,最多不超过15个字符!",  
		                    name : "loginName",
		                    id : 'login_name',
		                    hiddenName: 'loginName',
		                    maxLength:15,  
		                    maxLengthText:"账号最多不超过15个字符",
		                  //  vtype : "CheckUserName",
		                    invalidText : "登录账号已被使用！" ,
		                    validator : function(thisText) { 
		                        Ext.Ajax.request({  
		                                    url : 'user!checkLoginName.do',
		                                    method : 'post',  
		                                    params : {  
		                                        loginName : thisText  
		                                    },  
		                                    success : function(response, options) {  
		                                        if (response.responseText == 1) { 
		                                            isLoginNameOK = false;  
                                         			Ext.getCmp('login_name').markInvalid('登录账号已被使用！');
		                                        } else { 
		                                        	isLoginNameOK = true;  
                                        			Ext.getCmp('login_name').clearInvalid(); 
		                                        }  
		                                    }  
		                                });  
		                        return isLoginNameOK;//输入框失去焦点后，执行Ajax请求，但马上继续执行对是否valid的判断，这里先返回valid，默认验证成功，假如异步的请求返回后发现账号已注册，在改成invalid  markInvalid('账号已被使用');  
		  
		                    },
		                    width : 200
					},{
						xtype : 'textfield',
						fieldLabel : '密码',
						inputType: 'password',
						id : 'user_password',
						name : 'password',
						readOnly : false,
						allowBlank : false,
						emptyText : '',
						blankText : '',
						maxLength:32,  
		                maxLengthText:"密码最多不超过32个字符",
		                regex:/^.{4,}$/, 
		                regexText:'长度不能少于4位',
						width : 200
					},{
						xtype : 'textfield',
						fieldLabel : '确认密码',
						inputType: 'password',
						id : 'user_password2',
						name : 'password2',
						readOnly : false,
						allowBlank : false,
						emptyText : '',
						blankText : '请再次输入密码',
						vtype:"password",//自定义的验证类型
		                confirmTo:"user_password",//要比较的另外一个的组件的id
						width : 200
					} , {
						xtype : 'hidden',
						fieldLabel : '用户名标记',
						id : 'loginname_flag',
						name : 'loginname_flag'
					}]});
						
					var btn_save_form = new Ext.Button({
						text : '保存',
						iconCls : 'sy-save',
						handler : function(btn) {
							var frm = user_form_send.getForm();
							//if(Ext.get('loginname_flag').dom.value == "1") {
							//	Ext.MessageBox.alert('警告', '该登陆账号已经存在！');
							//	return false;
							//}
							if (frm.isValid()) {
								frm.submit({
								    url : 'user!addUser.do',
								    method : 'POST',
									waitTitle : '请稍候',
									waitMsg : '正在提交表单数据,请稍候...',
									success : function(form, action) {
											ds.reload();
											user_detail_window.close();
									},
									failure : function(form, action) {
										Ext.Msg.show({
											title : '错误提示',
											msg : action.result.message,
											buttons : Ext.Msg.OK,
											fn : function() {
												unfield.focus(true);
												btn.enable();
											},
											icon : Ext.Msg.ERROR
										});
									},// failure
									icon : Ext.Msg.ERROR
								});
							};// isValid
						}
					});
					
					var btn_reset_form = new Ext.Button({
						text : '取消',
						iconCls : 'sy-reset',
						handler : function(btn) {
							user_detail_window.close();
						}

					});

					var user_detail_window = new Ext.Window({
						tbar : [ btn_save_form, '-', btn_reset_form],
						width : 340,
						height : 200,
						title : '用户管理',
						iconCls : 'sy-win-flag',
						modal : true,
						items : [ user_form_send ]
					});
					user_detail_window.show();
				} // end form

	var btn_delete = new Ext.Button({
		text : '删除',
		iconCls : 'sy-delete',
		handler : function() {
			var record = grid_user.getSelectionModel().getSelected();
			if (record) {
				Ext.Msg.confirm('确认删除', '删除操作将会导致被授权该角色的用户无法正常使用系统，您确定删除吗？', function(btn) {
					if (btn == 'yes') {
						Ext.Ajax.request({
							url : 'user!deleteUserByLoginName.do',
							params:{
			    	        	loginName : record.data.loginName
				    	    },
							success : function() {
								ds_user.removeAll();
								ds_user.reload();
								Ext.MessageBox.alert('提示', '删除成功！');
							},
							failure : function() {
								Ext.Msg.show({
									title : '错误提示',
									msg : '删除记录失败！',
									buttons : Ext.Msg.OK,
									icon : Ext.Msg.ERROR
								});
							}
						});
					}
				});
			} else {
				Ext.MessageBox.alert('提示', '请选择一行纪录进行操作！');
				return;
			}
		}
	});
	
	var btn_refresh = new Ext.Button({
		text : '刷新',
		iconCls : 'sy-refresh',
		handler : function() {
			ds_user.removeAll();
			ds_user.reload();
		}
	});
	
     var panel = new Ext.Panel({
			    	region: "center",
					layout:'fit',
					border : true,
					margins:'0 5 0 0',
					tbar : [ btn_add, '-', btn_delete, '-', btn_refresh],
					listeners : {
						'render' : function(){
							// oneTbar.render(this.tbar); 
							twoTbar.render(this.tbar); 
						}
				 	},
					items : [ grid_user ]
				});
				
				
				var btn_search_office = new Ext.Button({
					text : '查询',
					iconCls : 'sy-search',
					handler : function(btn) {
						
						tree_op.root.reload();
						
					}
				});
				
				var panelmenu = new Ext.Panel({
					region: "west",
					split:true,
		            minSize: 105,
		            maxSize: 400,
		            collapsible: true,
		            collapsed: false, //展开或关闭
		            margins:'0 0 0 0',
		            layout:'fit',
		            layoutConfig:{
		                animate:true
		            },
					items :[tree_op],
					width:280
			   });
				
				
				/************************************* 所属区县树 结束 ********************************************************/
				var viewport = new Ext.Viewport({
					layout : 'border',
					items : [ panelmenu, panel ]
				});
});

</script>

</body>
</html>
